-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Стилизация #4
Стилизация #4
Conversation
♻️ Я собрал ваш пулреквест. Посмотреть можно здесь. |
} | ||
|
||
.additional-goods__title { | ||
font-family: "Oswald", sans-serif; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
в переменную
source/less/blocks/advantages.less
Outdated
|
||
.advantages__title { | ||
margin: 0; | ||
font-family: "Oswald", sans-serif; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Все шрифты в переменную, так будет тебе проще)
Принцип DRY не повторятся
source/less/blocks/page.less
Outdated
@font-face { | ||
font-family: "Oswald"; | ||
font-style: normal; | ||
font-weight: 400; | ||
src: url("../../fonts/oswald/oswaldregular.woff2") format("woff2"); | ||
font-display: swap; | ||
} | ||
|
||
@font-face { | ||
font-family: "Oswald"; | ||
font-style: normal; | ||
font-weight: 500; | ||
src: url("../../fonts/oswald/oswaldmedium.woff2") format("woff2"); | ||
font-display: swap; | ||
} | ||
|
||
@font-face { | ||
font-family: "Lato"; | ||
font-style: normal; | ||
font-weight: 400; | ||
src: url("../../fonts/lato/Lato-Regular.woff2") format("woff2"); | ||
font-display: swap; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Создай файл fonts.less
source/less/blocks/page.less
Outdated
.page { | ||
height: 100%; | ||
background-color: #E5E5E5; | ||
} | ||
|
||
.page__body { | ||
display: flex; | ||
flex-direction: column; | ||
min-height: 100%; | ||
margin: 0 auto; | ||
font-family: "Lato", sans-serif; | ||
font-weight: 400; | ||
font-size: 14px; | ||
line-height: 18px; | ||
color: #444444; | ||
background-color: #FFFFFF; | ||
width: 320px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
это файл page
source/less/blocks/page.less
Outdated
.visually-hidden { | ||
position: absolute; | ||
width: 1px; | ||
height: 1px; | ||
margin: -1px; | ||
border: 0; | ||
padding: 0; | ||
white-space: nowrap; | ||
clip-path: inset(100%); | ||
clip: rect(0 0 0 0); | ||
overflow: hidden; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
это файл visually-hidden
source/less/blocks/page.less
Outdated
line-height: 18px; | ||
color: #444444; | ||
background-color: #FFFFFF; | ||
width: 320px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Надо убрать)
у нас будет центровщик чтоб цвета протягивались, а контент был по середине
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
неее.....
- то что можно нарисовать на css делаем на css
- либо экспортируешь единую картинку с наложением, либо css
font-display: swap; | ||
} | ||
|
||
@oswald: "Oswald", sans-serif; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Создай файл variables.less (Еще позже добавим переменные))
🎓 Стилизация
💥 https://htmlacademy-adaptive.github.io/2553233-cat-energy-1/4/